<template>
	<view class="content-box">
		<!-- 头部navbar -->
		<navbar :fixed="true" :bgColor="'#fff'" :title="t('wallet.wdqb')" :leftIcon="true"></navbar>
		
		<!-- 未添加钱包状态 -->
		<view class="no-wallet" v-if="!hasWallet">
			<button class="add-wallet-btn" @click="addWallet">{{ t('wallet.tjqb') }}</button>
			
			<view class="recent-address">
				<text class="address-title">{{ t('wallet.jqtxdz') }}</text>
				<text class="no-address">{{ t('wallet.wu') }}</text>
			</view>
		</view>
		
		<!-- 已添加钱包状态 -->
		<view class="has-wallet" v-else>
			<view class="wallet-card">
				<text class="wallet-title">{{ t('wallet.wdzqb') }}</text>
				<image class="wallet-icon" src="/static/icon/ccdd-icon.svg"></image>
				<text class="wallet-address">TCNTdakbmgSZasagGy7iBtB3awRs9uJya6</text>
			</view>
			
			<view class="action-buttons">
				<button class="action-btn add-btn" @click="addWallet">{{ t('wallet.tj') }}</button>
				<button class="action-btn edit-btn" @click="editWallet">{{ t('wallet.bj') }}</button>
			</view>
			
			<view class="recent-address">
				<text class="address-title">{{ t('wallet.jqtxdz') }}</text>
				<view class="address-list">
					<text class="address-item" @click="copyAddress">TQLJUR7roiDyHQwCWHXKcjBp7zMNuwXw6i</text>
					<text class="address-item" @click="copyAddress">TKpaWU1ojmn8tMV82kgHbHwZpSodNqGDhE</text>
					<text class="address-item" @click="copyAddress">TCNTdakbmgSZasagGy7iBtB3awRs9uJya6</text>
					<text class="address-item" @click="copyAddress">TKpaWU1ojmn8tMV82kgHbHwZpSodNqGDhE</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useI18n } from 'vue-i18n';
	import { ref } from 'vue';
	const { t, locale } = useI18n();
	
	// 是否已添加钱包
	const hasWallet = ref(false); // 设置为false显示未添加钱包状态，设置为true显示已添加钱包状态
	
	// 添加钱包
	const addWallet = () => {
		// 这里添加钱包的逻辑
		hasWallet.value = true;
	};
	
	// 编辑钱包
	const editWallet = () => {
		// 这里编辑钱包的逻辑
		uni.showToast({
			title: t('wallet.bjz'),
			icon: 'none'
		});
	};
	
	// 复制地址
	const copyAddress = (e) => {
		const address = e.target.innerText || e.currentTarget.innerText;
		uni.setClipboardData({
			data: address,
			success: () => {
				uni.showToast({
					title: t('common.fzcg'),
					icon: 'none'
				});
			}
		});
	};
</script>

<style scoped lang="scss">
	.content-box {
		min-height: 100vh;
		background-color: #F5F6FA;
		padding-bottom: 100rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		padding-top: 180rpx;
	}
	
	/* 未添加钱包状态 */
	.no-wallet {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.add-wallet-btn {
			width: 100%;
			height: 100rpx;
			background: linear-gradient(to right, #00C9A7, #007ADF);
			border-radius: 20rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 60rpx;
			border: none;
		}
	}
	
	/* 已添加钱包状态 */
	.has-wallet {
		display: flex;
		flex-direction: column;
		
		.wallet-card {
			background: linear-gradient(to right, #6A5AE0, #9C7AF2);
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			position: relative;
			margin-bottom: 30rpx;
			
			.wallet-title {
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				margin-bottom: 60rpx;
			}
			
			.wallet-icon {
				position: absolute;
				top: 40rpx;
				right: 30rpx;
				width: 60rpx;
				height: 60rpx;
			}
			
			.wallet-address {
				color: #FFFFFF;
				font-size: 28rpx;
				word-break: break-all;
			}
		}
		
		.action-buttons {
			display: flex;
			justify-content: space-between;
			margin-bottom: 60rpx;
			
			.action-btn {
				width: 48%;
				height: 90rpx;
				border-radius: 20rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: none;
			}
			
			.add-btn {
				background: linear-gradient(to right, #00C9A7, #007ADF);
				color: #FFFFFF;
			}
			
			.edit-btn {
				background: #FFFFFF;
				color: #333333;
				border: 2rpx solid #EEEEEE;
			}
		}
	}
	
	/* 近期提现地址 */
	.recent-address {
		width: 100%;
		
		.address-title {
			font-size: 32rpx;
			color: #333333;
			font-weight: 500;
			margin-bottom: 30rpx;
			display: block;
		}
		
		.no-address {
			font-size: 28rpx;
			color: #999999;
			display: block;
		}
		
		.address-list {
			display: flex;
			flex-direction: column;
			
			.address-item {
				font-size: 28rpx;
				color: #333333;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #EEEEEE;
				word-break: break-all;
			}
		}
	}
</style>